<template>
    <BPTable ref='tableRef' align='center' row-key='id' name-key='name' :columns='columns' :api='pageApi' :buttons='buttons'>
        <template #status="{record}">
            <a-tag color="cyan" v-if="record.status == 0">{{ WATER_TEST_STATUS[record.status] }}</a-tag>
            <a-tag color="processing" v-else-if="record.status == 1">{{ WATER_TEST_STATUS[record.status] }}</a-tag>
            <a-tag color="error" v-else-if="record.status == 2">{{ WATER_TEST_STATUS[record.status] }}</a-tag>
            <a-tag color="warning" v-else-if="record.status == 3">{{ WATER_TEST_STATUS[record.status] }}</a-tag>
            <a-tag color="success" v-else-if="record.status == 4">{{ WATER_TEST_STATUS[record.status] }}</a-tag>
        </template>

        <template #$action="{record}">
            <BTextButton v-if="record.type == 0" type="primary" @click="openTestData(record)">数据</BTextButton>
        </template>
    </BPTable>

    <a-drawer destroyOnClose v-model:open='testDataVisible' title='数据' width='600px'>
        <TestData :id="currentRow.id" />
    </a-drawer>

    
</template>

<script lang='ts' setup>
    import { pageApi } from '@/api/WaterTest'
    import { message, Modal } from 'ant-design-vue'
    import { ref } from 'vue'
    import { useI18nStore } from '@/store/i18n'
    import { useResourceStore } from '@/store/resource'
    import { parseTime } from '@/utils'
    import { WATER_TEST_STATUS } from '@/constant'
    import TestData from './TestData.vue'

    const currentRow = ref<any>()
    const testDataVisible = ref(false)
        


    const imageUrl = import.meta.env.B_NET_STATIC_URL

    const i18n = useI18nStore()
    const resourceStore = useResourceStore()

    const visible = ref(false)
    const formRef = ref()
    const dialogTitle = ref()

    const tableRef = ref()
    const currentCategory = ref()

    function onChangeCategory(e) {
        currentCategory.value = e
        tableRef.value.load()
    }


    function openTestData(row) {
        currentRow.value = row
        testDataVisible.value = true
    }


    const buttons = ref<SearchButton[]>([])

    


    const columns = ref<Column[]>([
        {
            title : '设备号',
            dataIndex : 'deviceId',
            inSearch : true,
        },

        {
            title : "状态",
            dataIndex : 'status',
            // customRender({record}) {
            //     return WATER_TEST_STATUS[record.status]
            // },
            
            inSearch : true,
            type : 'select',
            options : WATER_TEST_STATUS,
            transform(value) {
                return Number(value)
            },
        },


        {
            title : '结果',
            dataIndex : 'result',
            customRender({record}) {
                return record.type == 0 ? '' : record.result
            },
        },

        {
            title : "开始时间",
            dataIndex : 'createTime',
            align : 'center',
            customRender({record}) {
                return parseTime(record.createTime)
            },
            inSearch : true,
            type : 'rangePicker',
            attrs : {
                showTime : true,
                valueFormat : 'X'
            },
            transform(v) {
                if(v && v.length > 0) {
                    return {startTime : Number(v[0]), endTime : Number(v[1])}//[Number(v[0]), Number(v[1])]
                }
            }
        },

        {
            title : "结束时间",
            dataIndex : 'endTime',
            align : 'center',
            customRender({record}) {
                return parseTime(record.endTime)
            },
            // inSearch : true,
            // type : 'rangePicker',
            // attrs : {
            //     showTime : true,
            //     valueFormat : 'X'
            // }
        },

        {
            title : i18n.t('operation'),
            dataIndex : '$action',
            align : 'center',
           
        }

    
    ])


    async function submit() {
        const res = await formRef.value.submit()
        if(res.success) {
            tableRef.value.reload()
            visible.value = false
            message.success('保存成功')
        }else {
            Modal.error({
                title : res.msg
            })
        }
    }

    
</script>

<style lang="scss" module>
    .container{
        display: flex;
        .category{
            width: 250px;
            border-right: 1px solid $borderColor;
        }
        .table{
            flex: 1;
        }
    }
</style>